<template>
	<view class="detail">
		<uni-popup ref="cancelOrderPopup" type="center" :animation="true" @change="changePopup($event,'cancelOrderPopup')">
			<view class="modal">
				<view class="modal-wrapper">
					<view class="psdBox">
						<view class="psdBox-wrapper">
							<view class="psdBox-header">确定取消当前订单吗？</view>
							<view class="psdBox-input--1"></view>
							<view class="psdBox-btnBox">
								<view class="psdBox-close" @tap="hidePopup('cancelOrderPopup')">取消</view>
								<view class="psdBox-confirm" @tap.stop="cancelOrder()">确定</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 密码 -->
		<uni-popup ref="psdPopup" type="center" :animation="true" @change="changePopup($event,'psdPopup')">
			<view class="modal">
				<view class="modal-wrapper">
					<view class="psdBox">
						<view class="psdBox-wrapper">
							<view class="psdBox-header">请输入支付密码</view>
							<view class="psdBox-input">
								<input type="password" v-model="password" placeholder="请输入支付密码" placeholder-class="inputStyle">
							</view>
							<view class="psdBox-btnBox">
								<view class="psdBox-close" @tap="hidePopup('psdPopup')">取消</view>
								<view class="psdBox-confirm" @tap.stop="$u.throttle(psdSubmit,1000)">确定</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 头部 -->
		<view class="bg">
			<pagehead>{{ getStatus(details.status) }}</pagehead>
			<!-- <view class="total" :class="{'total--ios' : system_info.platform == 'ios'}" v-if="details.status == '02'">
				请在  
				<view class="time">
					<u-count-down :time="((new Date((details.storeProduct.updateTime).replace(/-/g, '/')).getTime() / 1000) + Number(this.params['UNCONFIRMED_DELIVERY_TIME']) * 24 * 60 * 60  - (new Date(currentTime.replace(/-/g, '/')).getTime() / 1000)) * 1000" 
					:show-days="true" :show-hour="true"   format="DDHH:mm:ss"
					 @change="onChange"  @finish="onFinish"></u-count-down>
					<!-- <uni-countdown :show-day="true" :second="((new Date((details.storeProduct.updateTime).replace(/-/g, '/')).getTime() / 1000) + Number(this.params['UNCONFIRMED_DELIVERY_TIME']) * 24 * 60 * 60  - (new Date(currentTime.replace(/-/g, '/')).getTime() / 1000)) * 1000" /> -->
					<!-- <u-count-down :time="((new Date((details.deliveryTime).replace(/-/g, '/')).getTime() / 1000) + (1296000) - (new Date(currentTime).getTime() / 1000)) * 1000" @change="onChange"  @finish="onFinish"></u-count-down> 
				内确认收货，超时系统将自动交易成功
			</view> -->
			<view class="total" v-if="details.status == '00'">
				请在
				<view class="time">
					<u-count-down :time="((new Date((details.expirationTime).replace(/-/g, '/')).getTime() / 1000) - (new Date((currentTime).replace(/-/g, '/')).getTime() / 1000)) * 1000" @change="onChange"  @finish="onFinish"></u-count-down>
				</view>
				内付款，超时系统将自动取消订单
			</view>
		</view>
		<!-- 主体 -->
		<view class="dataBox">
			<view class="address" v-if="details.send_type=='01'">
				<view class="address-item">
				<image class="ico-addr" :src="IMAGE_STATIC+'/images/icon-addr.png'" mode="scaleToFill"/>
				<view class="txt">
					<view class="city"> {{details.address}}</view>
					<view class="name">{{details.name}} {{details.tel}}</view>
				</view>
				</view>
			</view>
			
			<view class="contentBox">
				<view class="contentBox-item">
					<view class="contentBox-data">
						<view class="imgBox">
							<init-image :src="imgShow(details.goods_show)" mode=""/>
						</view>
						<view class="nameBox">
							<view class="name">{{ details.goods_name }}</view>
							<view class="specification" v-if="details.label">{{ details.label }}</view>
							<view class="giveIntegral">
								<text class="price">{{details.goods_price  }}</text>
							</view>
							<view class="num">×{{ details.goods_num }}</view>
							<view class="operateBox">
								<!-- <view class="salesBox" v-if="details.status == 1 || details.status == 2" 
								@tap.stop="$tools.jump('/pages/afterSales/afterSales',details.order_no)">
									<view class="sales"><text>申请售后</text></view>
								</view> -->
							</view>
						</view>
					</view>
				</view>
				<view class="contentBox-item-b">
					<view class="contentBox-list__item">
						<view class="title">商品总价</view>
						<view class="red">{{ details.total_cash_num }}</view>
					</view>
					<view class="contentBox-list__item" v-if="details.totalPostage>0">
						<view class="title">邮费</view>
						<view class="red">{{ details.totalPostage }}</view>
					</view>
					<view class="contentBox-list__item">
						<view class="title">实际支付</view>
						<view class="titleBig"><text class="unit">￥</text>{{ details.total_cash_num }}</view>
					</view>
					<view class="contentBox-list__item">
						<view class="title">支付方式</view>
						<view class="titleBig">{{ getType(details.shop_type)}}</view>
					</view>
					<view class="contentBox-list__item">
						<view class="title">取货方式</view>
						<view class="titleBig">{{ details.send_type=='01'?'快递':'自取' }}</view>
					</view>
					<view class="contentBox-list__item" v-if="details.shop_type=='02'">
						<view class="title">划拨对象</view>
						<view class="titleBig">{{ getPickType(details.pick_type)}}</view>
					</view>
					<view class="contentBox-list__item" v-if="details.note">
						<view class="title">备注</view>
						<view class="titleBig">{{ details.note }}</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="contentBoxBg" v-if="details.status =='00'">
			<view class="contentBox-list">
				<view class="contentBox-list__item">
					<view class="title">需支付</view>
					<view class="priceBox">
						<view class="red" v-if="details.payPrice > 0">{{ details.payPrice }}</view>
						<!-- <text v-if="details.payPrice > 0 && details.payIntegral > 0">+</text>
						<view class="integral" v-if="details.payIntegral > 0">{{ details.payIntegral }}</view> -->
					</view>
				</view>
			</view>
		</view>
		
		<view class="contentBoxBg" v-if="details.status == '00'">
			<view class="buyWaysList">
				<view class="buyWaysList-list">
					<view class="info" v-for="(item,index) in payMentArr" :key="index" @tap.stop="changePayMent(item,index)">
						<view class="left">
							<image class="img" :src="IMAGE_STATIC+'/images/payMent-'+(index+1)+'.png'" mode="scaleToFill"/>
							{{item.name}}
						</view>
						<view class="right">
							<image class="ico" v-if="payIndex== index" :src="IMAGE_STATIC+'/images/radio-checked.png'" mode="scaleToFill"/>
							<image class="ico" v-else :src="IMAGE_STATIC+'images/radio.png'" mode="scaleToFill"/>
						</view>
						</view>
				</view>
			</view>
		</view>
		
		<view class="contentBoxBg" v-if="details.shipper_name ">
			<view class="contentBox-item">
				<view class="contentBox-list">
					<view class="contentBox-list__item">
						<view class="title">物流公司</view>
						<view class="title">{{ details.shipper_name }}</view>
					</view>
					<view class="contentBox-list__item">
						<view class="title">快递单号</view>
						<view class="title">
							{{ details.shipper_code }}
							<text @tap.stop="$tools.copy(details.shipper_code)">| <text class="copy">复制</text></text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="contentBoxBg">
			<view class="contentBox-list">
				<view class="contentBox-list__item">
					<view class="title">订单号：</view>
					<view class="title">
						{{ details.order_no }}
						<text @tap.stop="$tools.copy(details.order_no)">| <text class="copy">复制</text></text>
					</view>
				</view>
				<view class="contentBox-list__item">
					<view class="title">创建时间：</view>
					<view class="title">{{ details.cre_date }}</view>
				</view>
				<view class="contentBox-list__item" v-if="details.pay_date">
					<view class="title">付款时间：</view>
					<view class="title">{{ details.pay_date }}</view>
				</view>
			</view>
		</view>
		
		
		<view class="orderBottomBtnBox" v-if="details.status == '00'">
			<view class="cancelBox" @tap.stop="cancelOrderPopup()">
				<view class="cancel"><text>取消订单</text></view>
			</view>
			<view class="ship"  @tap.stop="pay()">立即付款</view>
		</view>
		
		<view class="orderBottomBtnBox" v-if="details.status == '03'">
			<view class="initBtn"  @tap.stop="confirmOrder()">确认收货</view>
		</view>
		
		<!-- 供应链 -->
		<!-- <view class="orderBottomBtnBox" v-if="details.status == 2">
			<view class="orderCancelBox" @tap.stop="$tools.jump('./seeLog',item.order_no)">
				<view class="cancelBox"><text>物流详情</text></view>
			</view>
			<view class="shipBox"  @tap.stop="">确认收货</view>
		</view>
		
		<view class="orderBottomBtnBox" v-if="details.status == 4">
			<view class="initBtn"  @tap.stop="$tools.jump('./seeLog',item.order_no)">物流详情</view>
		</view> -->
		
	</view>
</template>

<script>
	export default {
		components:{
		},
		data(){
			return{
				IMAGE_STATIC: this.$url.assetsPath,
				heightTop: 0,
				payMentArr:[
            {id:1,type:1,name:'微信支付'},
            {id:2,type:2,name:'分润账户'},
            {id:3,type:3,name:'其他账户'},
          ],
				payTypeObj:{ // 支付方式
					payType:0,
					id:0,
				},
				payIndex:-1,
				details: {
					orderId:'222',status:2,totalNum:1,price:100,payPrice:100,expirationTime:'2024-05-10',
					storeProduct:{image:'static/images/kong.png',updateTime:'2024-05-10',vipPrice:100,storeName:'缅甸纯天然翡翠手镯烟灰色油青色玉手'}
				},
				password: '',
				payActive: -1,
				paymentTypeList: [],
				toggle: true,
				balanceExchange: [],
				userMoney: {},
				payTypeObj: {},
				currentTime: '',
				system_info: '',
				params:{}
			}
		},
		computed:{
			getStatus(){
				return function(type){
					switch (type){
						case '00':
							return '待付款';
						case '02':
							return '待发货';
						case '03':
							return '待收货';
						case '04':
							return '已取消 ';
						case '05':
							return '退款';
						case '08':
							return '已冻结';
						case '09':
							return '已完成';
					}
				}
			},
			getType(){
				return function(type){
					switch (type){
						case '01':
							return '微信';
           case '02':
							return '积分';
           }
       }
     },
		 getPickType(){
				return function(type){
					switch (type){
						 case '01':
							return '平台';
            case '02':
							return '运营中心';
						case '03':
							return '上级';
           }
       }
     }
		},
		onPageScroll(e) {
			// e.scrollTop 获取页面的滚动高度
			this.heightTop = e.scrollTop;
		},
		onLoad(options) {
			this.order_id = options.value1;
		},
		onShow() {
			this.init();
			this.system_info = uni.getSystemInfoSync();
			console.log("system_info:",this.system_info);
		},
		methods: {
			init(){
				this.paymentTypeList = [
					{name: '余额',id:5,payType:3},
					// {name: '聚宝豆',id:1,},
					{name: '支付宝',id:2,payType:2},
					{name: '微信',id:3,payType:1},
					// {name: '银行卡',id:4,},
				];
				// this.getCurrentDate()
				// this.getParams()
				this.getOrderDetail();
				// this.getUserMoney();
			},
			// 立即支付
			pay(){
				console.log("this.details.isChannel：",this.details.isChannel);
				if(this.details.isChannel == -1){
					return this.$tools.toast('请选择支付方式');
				}else{
					if(this.details.isChannel == 1 || this.details.isChannel == 5){
						this.openPopup('psdPopup');
					}else{
						this.upPayOrder();
					}
				}
			},
			// 线上微信，支付宝，银行卡支付
			upPayOrder(){
				let that = this;
				var data = {
					// "addressId": that.addressId,
					"orderId": that.details.id,
					// "from": that.payTypeObj.id,
					"payType": that.payTypeObj.payType,
					"orderStatus": 2
				};
				console.log("data：",data);
				uni.showLoading({
					mask:true
				})
				that.$Ajax('/shop/order/payAction',
				data,
				res => {
						if(res.code == 200){
							console.log("wx_h5_pay_url:",res.data.expend.wx_h5_pay_url)
							console.log("----------:",that.payTypeObj.id,res.data.expend.pay_info,res.data.expend.wx_h5_pay_url)
							if(that.payTypeObj.id == 2 && res.data.expend.pay_info){
								console.log("支付宝H5")
								let url = res.data.expend.pay_info;
								location.href = url;
								setTimeout(() =>{
									that.getOrderDetail();
								},2000)
							}else if(that.payTypeObj.id == 3 && res.data.expend.wx_h5_pay_url){
								console.log("微信H5")
								let url = res.data.expend.wx_h5_pay_url;
								if(this.system_info.platform == 'ios' && this.system_info.browserName != 'safari'){
									that.$tools.jump('/pages/service/service',url,0)
								}else{
									location.href = url;
								}
								
								setTimeout(() =>{
									that.getOrderDetail();
								},2000)
							}else{
								that.$tools.toast("支付失败");
							}
							if(that.payTypeObj.id == 2 && res.data.expend.pay_info){
								console.log("支付宝APP")
								let url = res.data.expend.pay_info;
								plus.runtime.openURL(url);
								setTimeout(() =>{
									that.getOrderDetail();
								},2000)
							}else if(that.payTypeObj.id == 3 && res.data.expend.wx_h5_pay_url){
								console.log("微信APP")
								let url = res.data.expend.wx_h5_pay_url;
								plus.runtime.openURL(url);
								setTimeout(() =>{
									that.getOrderDetail();
								},2000)
							}
							uni.hideLoading();
						}
					},err => {
						uni.hideLoading();
					}
				)
			},
			// 其他支付
			psdSubmit(){
				if(this.password == ''){
					return this.$tools.toast('请输入支付密码');
				}
				var data = {
					// "addressId": this.addressId,
					"orderId": this.details.id,
					// "from": this.details.isChannel,
					// "payType": this.details.payType,
					// "from": this.payTypeObj.id,
					"payType": this.payTypeObj.payType,
					"payPwd": this.$md5(this.password),
					"orderStatus": 2
				};
				console.log("data：",data);
				uni.showLoading({
					mask:true
				})
				this.$Ajax('/shop/order/payAction',
				data,
				res => {
						if (res.code == 200) {
							this.$tools.toast(res.msg)
							this.hidePopup('psdPopup');
							this.getOrderDetail();
						}else{
							this.$tools.toast(res.msg);
						}
						uni.hideLoading();
					},err => {
						console.log("err：",err);
						if(err.errorCode == 1014){
							this.$tools.toastJump('请设置支付密码','/pages/setup/editPayPsd',1);
						}
						uni.hideLoading();
					}
				)
			},
			// 取消订单
			cancelOrderPopup(){
				this.openPopup('cancelOrderPopup');
			},
			cancelOrder(){
				var data = {
					"orderId": this.details.id,
					"orderStatus": 1
				};
				console.log("data:",data);	
				this.$Ajax('/shop/order/canalStoreOrder',
				data,
				res => {
						if (res.code == 200) {
							this.$tools.toast('取消订单成功');
							this.hidePopup('cancelOrderPopup');
							this.getOrderDetail();
						}
					},err =>{
				}, 'GET'
				)
			},
			// 确认收货
			confirmOrder(){
				const that = this
				uni.showModal({
					title: '提示',
					content: '确定收货',
					showCancel: true,
					success: ({ confirm, cancel }) => {
						if(confirm){
							var data = {
								order_id:this.details.order_id
							};
							console.log("data：",data);
							that.$Ajax('/api/productOrder/confirmSysProductOrder',data,
							res => {
									if (res.success) {
										that.$tools.toast("确认收货成功");
										that.getOrderDetail();
									}
								},err =>{
								}
							)
						}
					}
				})
				
			},
			// 订单详情
			getOrderDetail() {
				var data = {
					order_id: this.order_id,  
				};
				console.log("data：",data);
				uni.showLoading({
					mask: true
				})
				this.$Ajax('/api/productOrder/getUserProductOrderDetail',data,res => {
						this.details = res.data.userProductOrder;
						console.log('details',this.details)
						uni.hideLoading();
					}, err => {
						uni.hideLoading();
					}
				)
			},
			// 获取系统时间
			getCurrentDate(){
				const data={}
				this.$Ajax('/common/getCurrentDate',data,res => {
					this.currentTime = res.data;
					console.log('currentTime',this.currentTime )
				}, err => {
					},'GET'
				)
			},
			// 切换支付方式
      changePayMent(item,index){
				this.payIndex = index
				this.payTypeObj.id = item.id 
				this.$set(this.payTypeObj,'id',item.id)
        this.payTypeObj.payType = item.type 
        console.log(this.payTypeObj.id ,this.payTypeObj.payType)
      },
			onChange(e) {
				// console.log("E:",e);
			},
			onFinish(e){
				console.log('倒计时完',e)
				// this.$tools.back(1);
			},
			/* 弹出框公用 */
			openPopup(e, item) {
				this.popupInfo = item;
				this.$refs[e].open();
			},
			hidePopup(e) {
				this.$refs[e].close();
				this.password = '';
			},
			changePopup(e) {
				console.log('popup ' + e.type + ' 状态', e.show);
			},
			/* clear & eye */
			focusInput(index) {
				this.isFocus = index;
			},
			blurInput(index) {
				this.isFocus = null;
			},
			clearData(keyName) {
				for (var key in this.$data) {
					if (key == keyName) {
						this.$data[key] = '';
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.detail{
		position: relative;
		.total{
			width: 100%;
			margin: auto;
			// margin-top: 20rpx;
			background: #fff;
			border-radius: 12rpx;
			@include flexCenter;
			font-size: 24rpx;
			padding: 20rpx;
		}
		.address{
			width: 93.6%;
			margin: auto;
			margin-top: 20rpx;
			background: #fff;
			border-radius: 12rpx;
			.noaddress{
				height: 184rpx;
				font-size: 30rpx;
				color: #666666; 
				@include flexCenter;
			}
			.ico{
				width: 31rpx; 
				height: 31rpx; 
				margin-left: 18rpx;
				}
		&-item{
			@include flexBetween;
			padding: 30rpx 20rpx;
			.ico-addr{
			width: 48rpx; 
			height: 48rpx;
			margin-right: 18rpx; 
			}
			.ico{
				width: 31rpx; 
				height: 31rpx; 
				margin-left: 18rpx;
			}
			.txt{
			width:100%;
			.city{
				font-size: 30rpx;
				color: #333333;
			}
			.name{
				font-size: 24rpx;
				color: #999999;
			}
			}
		}
    	}
		.contentBox{
			width: 93.6%;
			margin: auto;
			margin-top: 24rpx;
			background: #fff;
			border-radius: 12rpx;
			padding: 32rpx 24rpx;
			.contentBox-item{
				.contentBox-data{
					@include flexLeft;
				}
				.imgBox{
					background: #EDEDED;
					width: 160rpx;
					height: 160rpx;
					margin-right: 24rpx;
					.img{
						width: 100%;
						height: 100%;
					}
				}
			}
			.name{
				font-size: 28rpx;
				font-family: PingFang HK, PingFang HK;
				font-weight: 500;
				color: #333;
				@include initMoreLine(1);
			}
			.specification{
				font-size: 28rpx;
				font-family: PingFang HK-Medium, PingFang HK;
				font-weight: 500;
				color: #666;
				margin: 8rpx 0 16rpx;
			}
			.price{
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				color: #AD2926;
				&::before{
					content: '￥';
					font-size: 24rpx;
					color: #AD2926;
					margin-top: 8rpx;
				}
			}
			image{
				width: 100%;
				height: 100%;
				// border-radius: 12rpx;
			}
		}
		.contentBox-item-b{
				width: 100%;
				margin-top: 20rpx;
				padding-top: 20rpx;
				border-top: 1px solid #eee;
			}
		.contentBox-list__item{
				@include flexBetween;
				padding-top: 20rpx;
				.title,.titleBig{
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}
				.red{
					color: #AD2926;
				}
			}
			.contentBox-list__item:nth-of-type(1){
				padding-top:0;
			}
		.contentBoxBg{
			width: 93.6%;
			margin: auto;
			margin-top: 24rpx;
			background: #fff;
			border-radius: 12rpx;
			padding: 32rpx 24rpx;
		}
		.buyWaysList-list{
			.info{
				@include flexBetween;
				padding:  20rpx;
				border-bottom: 1px solid #eee;
				.left{
					@include flexLeft;
					font-size: 32rpx;
					color: #333333;
					.img{
					width: 72rpx;
					height: 72rpx;
					margin-right: 12rpx;
					}
				}
				.right{
					.ico{
					width: 40rpx;
					height: 40rpx;
					}
				}
			}
			.info:last-of-type{
			border-bottom: none;
			}
		}
		.orderBottomBtnBox{
			@include flexBetween;
			width: 93.6%;
			margin: 20rpx auto;
			.cancelBox{
					width: 49%;
					padding: 4rpx;
					border-radius: 132rpx;
					margin: auto;
					.cancel{
						border-radius: 132rpx;
						border:1px solid #AD2926;
						// padding: 12rpx 38rpx;
						padding: 10rpx 0rpx;
						text-align: center;
						text{
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #AD2926;
						}
					}
				}
				.ship{
					width: 49%;
					background: #AD2926;
					border-radius: 132rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #fff;
					// padding: 14rpx 48rpx;
					padding: 14rpx 0rpx;
					margin-left: 16rpx;
					text-align: center;
					white-space: nowrap;
				}
		}
		.initBtn{
			background: #AD2926;
			border-radius: 132rpx;
			color: #fff;
		}
	}
	
	/deep/ .u-count-down {
		.u-count-down__text{
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #2B2B2B;
		}
	}
	
	
	
	
</style>